<template>
  <el-dialog v-model="dialogVisible" title="层级坐标" width="1980" style="height: 100%;z-index: 1990" @open="onOpen"
   >
      <component :is="_toRouteVue.name" >test</component>


    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" >
          Confirm
        </el-button>
      </div>
    </template>
  </el-dialog>
  <el-table :data="tableData" style="width: 100%" height="880" :row-class-name="tableRowClassName">
    <el-table-column fixed type="index" label="序号" :index="indexMethod" width="180"/>
    <el-table-column fixed prop="title" label="控件标题" width="300"/>
    <el-table-column prop="name" label="控件名称" width="300"/>
    <el-table-column prop="routeName" label="控件路由名称" width="300"/>
    <el-table-column prop="vueSrc" label="控件地址" width="600"/>
    <el-table-column fixed="right" label="Operations" min-width="300">
      <template #default="scope">
        <el-button
            link
            type="primary"
            size="small"
            @click.prevent="editRow(scope)"
        >
          编辑和预览
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-button class="mt-4" style="width: 100%" @click="onAddItem">
    Add Item
  </el-button>
</template>

<script lang="ts" setup>
import {ref} from 'vue'


let dialogVisible = ref(false)
interface LayerData {
  name: string
  title: string
  routeName: string
  vueSrc: string
}

import {tableData} from './tableData'
const indexMethod = (index: number) => {
  return index;
}
const tableRowClassName = (
    {row,rowIndex}: {
      row: LayerData
      rowIndex: number
    }
) => {
  //console.log("row:",row)
  if (rowIndex === 1) {
    return 'warning-row'
  } else if (rowIndex === 3) {
    return 'success-row'
  }
  return ''
}
const handlerView = () => {

  // router.push({
  //   name: _toRouteVue.routeName,
  //   query: {
  //     routeName: _toRouteVue.routeName,
  //     title: _toRouteVue.title,
  //     name: _toRouteVue.name
  //   }
  // })
}
const onOpen = () => {

}
let _toRouteVue=ref(null);
const editRow = (_scope) => {
  console.log("scope:", _scope.row.routeName)
  dialogVisible.value = true
  _toRouteVue.value = _scope.row;
}
// const deleteRow = (index: number) => {
//   tableData.value.splice(index, 1)
// }
const editPrevious = () => {

}

const onAddItem = () => {

  // tableData.value.push({
  //   date: dayjs(now).format('YYYY-MM-DD'),
  //   name: 'Tom',
  //   state: 'California',
  //   city: 'Los Angeles',
  //   address: 'No. 189, Grove St, Los Angeles',
  //   zip: 'CA 90036',
  // })
}
</script>


<style scoped>

.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}

.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
</style>
